<template>
  <el-form :model="course" :rules="rules" ref="courseForm" label-width="120px" >
    <el-form-item label="课程号" v-if="props.type!=='add'">
      <el-input v-model="course.id" disabled></el-input>
    </el-form-item>
    <el-form-item label="课程名" prop="name">
      <el-input v-model="course.name" :disabled="props.type==='search'"></el-input>
    </el-form-item>
    <el-form-item label="学分" prop="credit">
      <el-input v-model="course.credit" :disabled="props.type==='search'"></el-input>
    </el-form-item>
    <el-form-item label="选课人数" v-if="props.type!=='add'">
      <el-input v-model="course.count" disabled></el-input>
    </el-form-item>
    <el-form-item label="上课班级" v-if="props.type==='search'">
      <el-select
          filterable
          placeholder="展开"
          style="width: 240px"
      >
        <el-option
            v-for="item in course.classInfos"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="上课老师" v-if="props.type==='search'">
      <el-select
          filterable
          placeholder="展开"
          style="width: 240px"
          >
        <el-option
            v-for="item in course.teachers"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            />
        </el-select>
      </el-form-item>
    <el-form-item v-if="props.type!== 'search'">
      <el-button @click="emits('visible', false)">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {onMounted, ref} from "vue";
import request from "@/requests/request.js";
import {idStores} from "@/stores/stores.js";
import {ElMessage} from "element-plus";
const emits = defineEmits('visible')
const props = defineProps({
  type: String
})
const course = ref({
  id: "5",
  name: "民事诉讼法学",
  credit: "3",
  count: 0,
  majorName: null,
  teachers: [],
  classInfos: []
})
if(props.type === 'add'){
  course.value = {
    id: "",
    name: "",
    teachers: null,
    credit: "",
    count: 0,
    majorName: null
  }
}
const stores = idStores();
const courseForm = ref(null)
onMounted(() => {
  request.get('/course/get-course',{
    params: {
      id: stores.id
    }
  }).then(res => {
    console.log(res.data.data)
    course.value = res.data.data
    if(props.type === 'add'){
      course.value = {
        id: "",
        name: "",
        teachers: null,
        credit: "",
        count: 0,
        majorName: null
      }
    }
  })
})
const rules = ref(
    {
      name: [
        {required: true, message: '请输入课程名', trigger: 'blur'},
      ],
      credit: [
        {required: true, message: '请输入学分', trigger: 'blur'},
      ],
    }
)
const submitForm = () => {
  courseForm.value.validate((valid) => {
    if (valid) {
      if (props.type === 'add') {
        request.put('/course/add-course', {
          params: {
            name: course.value.name,
            credit: course.value.credit
          }
        }).then(res => {
          emits('visible', false)
          ElMessage({
            message: res.data.message,
            type: 'success',
          })
        })
      }
      else if (props.type === 'edit') {
        request.post('/course/update-course',
            {
              courseId: course.value.id,
              name: course.value.name,
              credit: course.value.credit
            }
        ).then(res => {
          emits('visible', false)
          ElMessage({
            message: res.data.message,
            type: 'success',
          })
        })
      }
    }
  })
}
</script>
